<template>
	<view>
		<page-header :team-id="teamId" :disabled="true"></page-header>
		<scroll-view 
			class="content"
			scroll-y
			@scrolltolower="handlePullRefresher"
			:refresher-enabled="true"
			>
			<uni-list>
				<uni-list-chat v-for="(project, projectIndex) in projectList" :key="projectIndex" clickable @click="handleClickProject(project)" :title="project.projectName" :avatar="projectIcon(project)" :note="projectIntroduce(project)">
					<view class="chat-custom-right">
						<uni-icons type="star-filled" :color="collectColor(project)" size="18"></uni-icons>
					</view>
				</uni-list-chat>
			</uni-list>
		<uni-load-more :status="loadStatus" @clickLoadMore="handlePullRefresher()" />
		</scroll-view >
	</view>
</template>

<script>
	import { listProject } from "@/api/system/project.js"
	import { updateConfig } from '@/api/system/user.js'
	import config from '@/config'
	import PageHeader from "@/components/page-header/index.vue"
	export default {
		name: 'Plan',
		components: { PageHeader },
		data() {
			return {
				// 页面传过来的参数
				option: {},
				// 项目列表总数量
				total: 0,
				// 项目列表
				projectList: [],
				// 显示的加载状态
				loadStatus: 'more',
				// 当前加载页数
				currentPageNum: 1,
			}
		},
		computed: {
			/** 当前团队ID */
			teamId() {
			    return this.option && this.option.teamId ? this.option.teamId : this.$store.state.user.config.currentTeamId;
			},
			/** 获取当前成员id */
			currentMemberId() {
				return this.$store.state.user.id;
			},
			/** 获取项目图标 */
			projectIcon: function() {
				return function(project) {
					return config.baseUrl + project.projectIcon;
				}
			},
			/** 获取项目介绍 */
			projectIntroduce: function() {
				return function(project) {
					return project.projectIntroduce || '未填写项目介绍';
				}
			},
			/** 标记采集的五角星颜色 */
			collectColor: function() {
				return function (project) {
					return project.collect?'#f7ba2a':'#c6d1de'
				}
			}
		},
		onLoad(option) {
			this.option = option;
			this.getProjectList();
		},
		methods: {
			/** 处理下拉刷新事件 */
			handlePullRefresher() {
				if(this.loadStatus === 'more') {
					this.getProjectList();
				}
			},
			/** 处理点击项目事件 */
			handleClickProject(project) {
				updateConfig({
				    currentTeamId: this.teamId,
					currentProjectId: project.projectId
				}).then(res => {
					this.$store.dispatch('GetInfo').then(() => {
						this.$tab.reLaunch('/pages/system/dashboard/index');
					});
				});
			},
			/** 获取项目列表 */
			getProjectList() {
				this.loadStatus = 'loading';
				const queryParams = {
					teamId: this.teamId,
					params: {
					  userId: this.currentMemberId,
					},
					pageNum: this.currentPageNum++,
					pageSize: 10
				}
				listProject(queryParams).then(res => {
					this.projectList = [...this.projectList, ...res.rows].filter((item, index, self) =>
					    index === self.findIndex((t) => t.projectId === item.projectId)
					);
					this.total = res.total;
					if(this.total > this.projectList.length) {
						this.loadStatus = 'more';
					} else {
						this.loadStatus = 'no-more';
					}
				});
			},
		}
	}
</script>

<style scoped>

</style>